<%--
  Created by IntelliJ IDEA.
  User: JD
  Date: 2023/9/25
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fml" uri="http://java.sun.com/jstl/fmt_rt" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>
    <style>
        .mycontainer {
            position: absolute;
            height: 350px;
            width: 600px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        div .mycontainer_left {
            position: absolute;
            width: 200px;
            height: 350px;
        }

        div .mycontainer_left .head_img input {
            visibility: hidden;
        }

        div .mycontainer_left .head_img img {
            position: relative;
            height: 200px;
            width: 200px;
            top: 10px;
            border-radius: 50%;
            border: solid 1px rgb(106, 150, 201);
        }

        div .mycontainer_left label {
            position: absolute;
            left: 50%;
            top: 72%;
            transform: translateX(-50%);
        }

        div .mycontainer_right {
            position: absolute;
            width: 350px;
            height: 350px;
            /* left: 200px; */
            right: 0;
        }
    </style>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">基本资料</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div id="mycontainer" class="mycontainer">
    <div id="mycontainer_left" class="mycontainer_left">
        <div id="head_img" class="head_img">
            <input type="file" id="file"/>
            <img src="<%=basePath%>static/users/${user.headimg}" alt="头像" id="headimg" title="点击图片更换头像" onclick="selectFile()">
        </div>
        <label id="username">${user.username}</label>
    </div>
    <div id="mycontainer_right" class="mycontainer_right">
        <form class="layui-form">
            <hr class="hr20">
            <div class="layui-form-item">
                <label for="password" class="layui-form-label">
                    密&emsp;码
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" lay-affix="eye"
                           autocomplete="off" class="layui-input" value="${user.password}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    电&emsp;话
                </label>
                <div class="layui-input-inline">
                    <input type="tel" id="phone" name="phone"
                           autocomplete="off" class="layui-input" value="${user.phone}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="email" class="layui-form-label">
                    邮&emsp;箱
                </label>
                <div class="layui-input-inline">
                    <input type="email" id="email" name="email"
                           autocomplete="off" class="layui-input" value="${user.email}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="birthday" class="layui-form-label">
                        生&emsp;日
                    </label>
                    <div class="layui-input-inline">
                        <input type="date" class="layui-input" id="birthday" placeholder="yyyy-MM-dd"
                            value="<fml:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"></fml:formatDate>">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" style="width:75%;margin-left: 40px;" id="L_repass"
                        type="button" id="submit">
                    修改
                </button>
                <hr class="hr20">
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    let path = "";
    function selectFile() {
        $("#file").trigger("click");
    }
    $(document).on('click', '#L_repass', function () {
        const formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);
        formData.append("username", $("#username").html());
        formData.append("password", $("#password").val());
        formData.append("phone", $("#phone").val());
        formData.append("email", $("#email").val());
        formData.append("birthday", $("#birthday").val());
        $.ajax({
            url: "../user/upload",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data){
                console.log(data);
                if(data.code > 0){
                    layer.msg(data.message + "即将退出登录", {icon: 1});
                }else {
                    layer.msg(data.message + "服务器错误", {icon: 2});
                }
                setTimeout(function(){
                    window.parent.location.href = "../user/logOut"
                }, 2000);
            },
            error: function (){
                layer.msg(data.message, {icon: 2});
            }
        })
    });
</script>
</body>
</html>
